<template>
    <div>
        <el-drawer :title="config.title || '详情信息'" 
            v-model="drawerShow" direction="rtl" :before-close="drawerClose" 
            :size="900" :close-on-click-modal="false">
            <div>
                <div class="flex space-between">
                    <div class="flex title_container">
                        <h3>{{ config.detailTitle || '---' }}</h3>
                        <div>
                            <span v-for="item in stateOptions" :key="item.value">
                                <el-tag :type="item.type" v-if="item.value == config.state">{{ item.label }}</el-tag>
                            </span>
                        </div>
                    </div>
                    <div>
                        <el-button type="primary" class="oper_button margin-right-md-i" v-if="!config.editBtnHide"
                            @click="edit"> <i class="icon-base icon-base-tianxie margin-right-sm"></i>编 辑 </el-button>
                        <el-dropdown @command="handleCommand" v-if="config.moreBtnsShow">
                            <el-button class="oper_button"> 更 多<i class="icon-base icon-base-arrow-down-bold margin-left-sm"></i> </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :command="bItem.value"
                                        v-for="bItem in editBtnsOptions" :key="bItem.value">{{ bItem.label }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
                <div class="relateInfo_container">
                    <ul>
                        <li v-for="(item, index) in detailRelateInfo" :key="index">
                            <span>{{ item.label }}</span>：<span>{{ item.value }}</span>
                        </li>
                    </ul>
                </div>
                <div class="operate_btn_container">
                    <slot name="operateBtns"></slot>
                </div>
                <div class="content_container">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabsChange">
                        <el-tab-pane :label="`${item.label}${item.value ? `(${item.value})` : ''}`" :name="item.key" 
                            v-for="item in tabOptions" :key="item.key">
                            <slot :name="item.key"></slot>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <template #footer v-if="config.footerShow">
                <div class="flex flex-end">
                    <el-button type="default" @click="cancel"> {{ config.cancelLabel || '取 消' }} </el-button>
                    <el-button type="primary" @click="submit"> {{ config.submitLabel || '保 存' }} </el-button>
                    <slot name="detailBtns"></slot>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    const props = defineProps([ 'show', 'data', 'state', 'config', 
        'stateOptions', 'detailRelateInfo', 'tabOptions', 'editBtnsOptions', 'activeName' ]);
    const emit = defineEmits([ 'update:show', 'submit', 'close', 'edit', 'change', 'command' ]);
    const drawerShow = ref(false);
    const activeName = ref(props.activeName || props.tabOptions[0].key);
    watch(() => props.show, () => { 
        drawerShow.value = props.show;
        activeName.value = props.tabOptions[0].key;
    }); 
    const tabsChange = (value) => {
        emit('change', value.paneName)
    };
    const edit = () => {
        emit('edit')
    };
    const handleCommand = (command) => {
        emit('command', command)
    };
    const submit = () => {
        emit('submit');
    };
    const cancel = () => {
        drawerShow.value = false;
        emit('update:show', false);
    };
    const drawerClose = () => {
        drawerShow.value = false;
        emit('update:show', false);
        emit('close')
    };
</script>
<style scoped lang="scss">
    :deep(.el-drawer__body){
        padding-top: 15px;
    }
    :deep(.el-drawer__header){
        font-weight: 700;
        margin-bottom: 0px;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }
    :deep(.el-drawer__footer){
        border-top: 1px solid #eee;
    }
    .title_container{
        h3{
            line-height: 23px;
            margin-right: 10px;
        }
    }
    .relateInfo_container{
        ul{
            display: flex;
            font-size: 14px;
            color: #666;
            margin-top: 10px;
            li{
                margin-right: 25px;
            }
        }
    }
</style>